<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
        }
        .box1{
           
            /* 边框的宽度 单位为px*/
            border-width: 5px;
            /* 边框的样式  solid 实线*/
            border-style: solid;
            /* dotted  点状线*/
            /* border-style: dotted; */
            /* dashed 虚线*/
            /* border-style: dashed; */
            /* 边框的颜色 默认黑色*/
            border-color: green;
        }

        .box2{
         
            border-width: 5px;
            border-style: solid;
            /* border-top-color: green;
            border-right-color: red;
            border-left-color: blue;
            border-bottom-color: pink; */
            /* border-color简写   4个值分别是 上 右 下 左 */
            /* border-color: green red pink blue; */

            /* border-color简写  3个值分别是 上 左右 下 */
            /* border-color: green red pink; */

            /* border-color简写 2个值分别是 上下 左右 */
            /* border-color: green red; */

            /* border-color简写 1个值是 四条边的颜色 */
            border-color:  red;

            /* border-style&& border-width 也可以写 1 2 3 4个值，同border-color*/
            border-top-style:dashed ;
            border-top-width: 20px;

            /* border-width: 5px;
            border-style: solid; */
        }
        .box3{

            /* border-width: 4px;
            border-style: solid;
            border-color: red; */
            /* border对4条边框一样的时候的简写形式 */
            /* border: 4px solid red; */

            /* 3角型 */
            width: 0px;
            height: 0px;
            border: 100px solid;
            border-color: transparent green transparent transparent;
        }
        .box4{
            /* 将border-radius 的值设置成盒子宽高的一半 并且保证盒子宽高一样，就能画圆  */
            border-radius: 100px;
            border: 1px solid red;
            background-color: red;
        }
        .box5{
            width: 200px;
            height: 100px;
            border-radius: 100px 100px 0px 0px;
            border: 1px solid red;
            background-color: red;
        }
        .box6{
            border-radius: 200px 0px 0px 0px;;
            border: 1px solid red;
            background-color: red;
        }
        /* 并集选择器 */
        /* 给table加上边框 */
        table,td{
            border: 1px solid;
            border-collapse: collapse;
        }
        
    </style>
</head>
<body>
    <!-- 盒子模型的组成：边框 内容 外边距 内边距 -->

    <!-- 边框的组成：边框的宽度  边框的样式  边框的颜色 -->
<!-- 
    <div class="box1 box">

    </div> -->
    <!-- <div class="box2 box">

    </div> -->

    <div class="box3 box">

    </div>
    <div class="box4 box">

    </div>
    <div class="box5">

    </div>
    <br>
    <div class="box6 box">

    </div>
    <table>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>80</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>18</td>
        </tr>
    </table>
</body>
</html>